<template>
  <div class="home">
    <div class="warp">
      <!-- 轮播图栏目 -->
      <div class="slide_box">
        <!-- 轮播图左侧列表 -->

        <ul class="leftsideBar">
          <li>
            <a href="" class=""> 高中名师视频 </a> /
            <a href="" class=""> 数学视频 </a> /
            <a href="" class=""> 英语视频 </a>
          </li>
          <li>
            <a href="" class=""> 初中名师视频 </a> /
            <a href="" class=""> 数学视频 </a> /
            <a href="" class=""> 英语视频 </a>
          </li>
          <li>
            <a href="" class=""> 高中英语听力 </a> /
            <a href="" class=""> 必修一 </a> / <a href="" class=""> 必修二 </a>
          </li>
          <li>
            <a href="" class=""> 必修三 </a> /
            <a href="" class=""> 必修四 </a> / <a href="" class=""> 必修五 </a>
            <a href="" class=""> 高考 </a>
          </li>
          <li>
            <a href="" class=""> 初中英语听力 </a> /
            <a href="" class=""> 七上 </a> / <a href="" class=""> 七下 </a>
          </li>
          <li>
            <a href="" class=""> 八上 </a> / <a href="" class=""> 八下 </a> /
            <a href="" class=""> 九年级全 </a> <a href="" class=""> 中考 </a>
          </li>
          <li>
            <a href="" class=""> 高中文言文 </a> /
            <a href="" class=""> 初中文言文 </a> /
            <a href="" class=""> 学习方法 </a>
          </li>
          <li>
            <a href="" class=""> 高中英语语法 </a> /
            <a href="" class=""> 初中语法 </a> /
            <a href="" class=""> 英语单词表 </a>
          </li>
        </ul>

        <!-- 轮播图左侧列表 END-->

        <!-- 轮播图本体 -->
        <div class="block">
          <div class="demonstration" style="width: 940px"></div>
          <el-carousel height="440px" arrow="always">
            <el-carousel-item>
              <router-link to="/VIP" tag="div">
                <img src="../assets/imgs/selit01.jpg" alt="" />
              </router-link>
            </el-carousel-item>
            <el-carousel-item>
              <router-link to="/appdown" tag="div">
                <img src="../assets/imgs/selit02.jpg" alt="" />
              </router-link>
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 轮播图本体 END-->
      </div>

      <!-- 轮播图栏目 END-->

      <!-- 热点推荐 -->
      <div class="sidebar-title mt-20">
        <h2>热点推荐</h2>
        <span>时下最热最新资源推荐</span>
        <router-link to="/videos" class="more">查看更多</router-link>
      </div>

      <!-- 热点推荐列表 -->
      <div class="row-lists">
        <ul class="card-ul">
          <li class="" v-for="item in HotLists" :key="item.Hotids" @click="setkeys(item.HotKey,item.Hotids)">
              <div class="card-img">
                <img :src="item.imgs" :alt="item.title" />
                <div class="card-time">{{ item.duration }}</div>
              </div>
              <div class="card-text">
                <p>{{ item.title }}</p>
                <p>
                  <i class="iconfont icon-view"></i>{{ item.num }}人正在学习
                </p>
              </div>
          </li>
        </ul>
      </div>
      <!-- 热点推荐列表 END-->

      <!-- 热点推荐 END-->
    </div>

    <!-- 视频课程 -->
    <div class="CourseVideos bg-white">
      <div class="warp">
        <div class="sidebar-title">
          <h2>课程视频</h2>
          <span>初中高中名师全科目视频，你要找的这里都有</span>
          <router-link to="/videos" class="more">查看更多</router-link>
        </div>

        <!-- 分割线 -->
        <div class="line"></div>

        <!-- 标签列表 -->
        <div
          class="breadcrumb bg-grey pad-10"
          style="padding-left: 40px"
          v-if="tagLists"
        >
          <div
            class="tagcrumb"
            v-for="(item, index) in tagLists[0]['tagMaster'][0]"
            :key="item"
          >
            <router-link to="/" class=""> {{ item }} </router-link>
            <span
              class="green"
              v-if="index != tagLists[0]['tagMaster'][0].length - 1"
              >/</span
            >
          </div>
          <br />
          <div
            class="tagcrumb"
            v-for="(item, index) in tagLists[0].tagMaster[1]"
            :key="item"
          >
            <router-link to="/" class=""> {{ item }} </router-link>
            <span
              class="green"
              v-if="index != tagLists[0].tagMaster[1].length - 1"
              >/</span
            >
          </div>
        </div>
        <!-- 标签列表 END-->

        <!-- 课程视频列表 -->

        <div class="row-lists" v-if="CourseVideoLists">
          <ul class="card-ul-horizontal">
            <li  v-for="item in CourseVideoLists" :key="item.CVids" @click="setkeys(item.CVkey,item.CVids)">
                <div class="card-img">
                  <img :src="item.imgs" :alt="item.title" />
                  <div class="card-time">{{ item.duration }}</div>
                </div>
                <div class="card-text">
                  <p>{{ item.title }}</p>
                  <p class="intro">{{ item.texts }}</p>
                  <p>
                    {{ item.times }}
                    <i class="iconfont icon-view"></i>
                    {{ item.num }}人正在学习
                  </p>
                </div>
                <div :class="['Badge', item.colors]">{{ item.colortext }}</div>
            </li>
          </ul>
        </div>

        <!-- 课程视频列表 END-->
      </div>
    </div>

    <!-- 视频课程 END-->

    <!-- 英语听力 -->

    <div class="warp">
      <!-- 广告 -->
      <div class="ads-info" style="padding: 10px 0px" v-if="AdvertisingLists">
        <router-link to="/vip"
          ><img :src="AdvertisingLists[1]['srcs']" alt=""
        /></router-link>
      </div>
      <!-- 广告 END-->

      <div class="sidebar-title">
        <h2>英语听力</h2>
        <span>课本同步听力，文本同步，下载随身听</span>
        <router-link to="/EnListen" class="more">查看更多</router-link>
      </div>

      <!-- 标签列表 -->

      <div
        class="breadcrumb bg-grey pad-10"
        style="font-size: 14px"
        v-if="tagLists"
      >
        <div
          class="tagcrumb"
          v-for="(item, index) in tagLists[0]['tagEnlistening']"
          :key="item"
        >
          <router-link to="/" class=""> {{ item }} </router-link>
          <span
            class="green"
            v-if="index != tagLists[0]['tagEnlistening'].length - 1"
            >/</span
          >
        </div>
      </div>

      <!-- 标签列表 -->
      <!-- 英语听力列表 -->

      <div class="row-lists" v-if="Enlistening">
        <ul class="card-ul">
          <li class="mb-30" v-for="item in Enlistening" :key="item.Enids" @click="setkeys(item.EnKeys,item.Enids)">
              <div class="card-img">
                <img :src="item.imgs" :alt="item.title" />
                <div class="card-time">{{ item.duration }}</div>
              </div>
              <div class="card-text">
                <p>{{ item.title }}</p>
                <p>
                  <i class="iconfont icon-view"></i>{{ item.num }}人正在学习
                </p>
              </div>
          </li>
        </ul>
      </div>

      <!-- 英语听力列表 END-->
    </div>

    <!-- 英语听力 END-->

    <!-- 热点资料 -->

    <div class="CourseVideos bg-white">
      <div class="warp">
        <div class="sidebar-title">
          <h2>热点资料</h2>
          <span>最新最热考点，精选学习资料，名师总结经验</span>
          <router-link to="/materials/lists" class="more">查看更多</router-link>
        </div>

        <!-- 分割线 -->
        <div class="line"></div>

        <!-- 标签列表 -->

        <div
          class="breadcrumb bg-grey pad-10"
          style="font-size: 14px"
          v-if="tagLists"
        >
          <div
            class="tagcrumb"
            v-for="(item, index) in tagLists[0]['tagVideo']"
            :key="item"
          >
            <router-link to="/" class=""> {{ item }} </router-link>
            <span
              class="green"
              v-if="index != tagLists[0]['tagVideo'].length - 1"
              >/</span
            >
          </div>
        </div>

        <!-- 标签列表 -->

        <!-- 热点资料列表 -->

        <div class="row-lists" v-if="Masterlists">
          <ul class="card-ul-horizontal">
            <li v-for="item in Masterlists" :key="item.MaIds" @click="runMaster(item.id)">
                <div class="card-img">
                  <img :src="item.imgs" :alt="item.title" />
                </div>
                <div class="card-text">
                  <p>{{ item.title }}</p>
                  <p>
                    {{ item.times }}
                    <i class="iconfont icon-view"></i>
                    {{ item.num }}人正在学习
                  </p>
                </div>
            </li>
          </ul>
        </div>

        <!-- 热点资料列表 END-->

        <!-- 广告 -->
        <div class="ads-info" style="padding: 10px 0px" v-if="AdvertisingLists">
          <router-link to="/appdown"
            ><img :src="AdvertisingLists[0]['srcs']" alt=""
          /></router-link>
        </div>
        <!-- 广告 END-->
      </div>
    </div>

    <!-- 热点资料 END-->

    <!-- 友情链接 -->

    <div class="warp">
      <div class="sidebar-title">
        <h2>友情链接</h2>
      </div>
      <div class="flink">
        <ul>
          <li>
            <a href="http://www.tingkez.com" target="_blank"> 听课网 </a>
          </li>
          <li>
            <a href="https://www.xinhuacidian.com/" target="_blank">
              新华词典文库
            </a>
          </li>
          <li>
            <a href="http://zujuan.xkw.com/" target="_blank"> 组卷网 </a>
          </li>
          <li>
            <a href="http://sh.yuloo.com/" target="_blank"> 上海教育培训 </a>
          </li>
          <li>
            <a href="https://www.gushimi.org/" target="_blank"> 古诗大全 </a>
          </li>
          <li>
            <a href="https://www.doczhi.com/" target="_blank"> 论文下载 </a>
          </li>
          <li>
            <a href="http://www.zichabaogao.com/" target="_blank"> 自查报告 </a>
          </li>
          <li>
            <a href="http://www.eduease.com" target="_blank"> 北京家教 </a>
          </li>
          <li>
            <a href="http://www.chinawenhua.com.cn/" target="_blank">
              传统文化杂谈
            </a>
          </li>
          <li>
            <a href="http://nmg.huatu.com/" target="_blank">
              内蒙古人事考试网
            </a>
          </li>
          <li>
            <a href="https://www.gdwxcn.com/" target="_blank"> 古典文学网 </a>
          </li>
          <li>
            <a href="https://www.zuoyouming.cc/" target="_blank"> 座右铭 </a>
          </li>
        </ul>
      </div>
    </div>

    <!-- 友情链接 END-->
  </div>
</template>

<script>
// 引入本地数据方法
import { getJsonData } from "../api/home.js";
export default {
  data() {
    return {
      AdvertisingLists: null, //广告图片列表
      tagLists: null, //标签列表
      CourseVideoLists: null, //课程视频列表
      HotLists: null, //热点推荐列表
      Enlistening: null, //英语听力列表
      Masterlists: null, //热点资料列表
    };
  },
  methods: {
    getAdvertisingListsFun() {
      //获取广告图片
      getJsonData().then((data) => {
        this.AdvertisingLists = data["AdvertisingLists"];
      });
    },
    runMaster(id){
       localStorage.setItem("Masterkey",id)
       this.$router.push("materials/articles")
       return
    },
    setkeys(keys,ids){
      localStorage.setItem("videokey",keys)
      localStorage.setItem("Videoids",ids)
      this.$router.push("course")
      return 
    },
    getTagListsFun() {
      //获取标签列表
      getJsonData().then((data) => {
        this.tagLists = data["tagLists"];
      });
    },
    getCourseVideoListsFun() {
      //获取课程视频
      getJsonData().then((data) => {
        this.CourseVideoLists = data["CourseVideoLists"];
      });
    },
    getHotListsFun() {
      //获取热点推荐
      getJsonData().then((data) => {
        this.HotLists = data["HotLists"];
      });
    },
    getEnlisteningFun() {
      //获取英语听力
      getJsonData().then((data) => {
        this.Enlistening = data["Enlistening"];
      });
    },
    getMasterlistsFun() {
      //获取热点资料
      getJsonData().then((data) => {
        this.Masterlists = data.Masterlists;
      });
    },
  },
  created() {
    this.getAdvertisingListsFun(); //获取广告图片
    this.getTagListsFun(); //获取标签
    this.getCourseVideoListsFun(); //获取课程视频
    this.getHotListsFun(); //获取热点推荐
    this.getEnlisteningFun(); //获取英语听力
    this.getMasterlistsFun(); //获取热点资料
  },
};
</script>

<style lang="scss" >
// css代码区域

.padlf-30 {
  padding-left: 30px;
}

/* 轮播图栏目 */
.slide_box {
  width: 100%;
  height: 440px;
  margin-top: 31px;
  display: flex;
  .leftsideBar {
    width: 266px;
    height: 100%;
    display: flex;
    background-color: #2d323d;
    flex-direction: column;
    justify-content: space-around;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    font-size: 14px;
    font-weight: 400;
    color: #ccc;
    & > li {
      height: 50px;
      line-height: 50px;
      cursor: pointer;
      position: relative;
      padding: 0 14px 0 21px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      a {
        color: #ccc;
      }
    }
  }
}
/* 热点推荐 */
.sidebar-title {
  display: flex;
  align-items: center;
  padding: 30px 0 20px;
  h2 {
    font-size: 22px;
  }
  span {
    padding-left: 10px;
    font-size: 16px;
    font-weight: 400;
    color: #666;
    line-height: 22px;
  }
}
.more {
  color: #576b95;
  margin-left: auto;
  margin-right: 20px;
  position: relative;
  &::after {
    content: "";
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
    top: 0px;
    bottom: 0px;
    margin: auto 0;
    right: -15px;
    background: url(../assets/imgs/右三角.png) no-repeat center center;
    background-size: 100%;
  }
}
.card-ul {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 20px;
  li {
    background-color: #fff;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 4%);
    border-radius: 6px;
    height: 260px;
    width: 280px;
    &:hover {
      box-shadow: 0 0 20px 0 rgb(0 0 0 / 14%);
    }
    img {
      width: 100%;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
    }
  }
  .card-img {
    position: relative;
    width: 100%;
    height: 190px;
    overflow: hidden;
    .card-time {
      position: absolute;
      right: 8px;
      bottom: 8px;
      width: 60px;
      height: 18px;
      border-radius: 2px;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.5);
      font-size: 12px;
      font-weight: 400;
      color: #fff;
      line-height: 17px;
    }
  }
  .card-text {
    margin-top: 11px;
    padding-left: 11px;
    p {
      font-size: 16px;
      font-weight: 600;
      color: #333;
      line-height: 22px;
      overflow-x: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      &:last-child {
        display: flex;
        font-size: 12px;
        font-weight: 400;
        color: #999;
        line-height: 17px;
        margin-top: 5px;
        align-items: center;
      }
    }
  }
}
.CourseVideos {
  a {
    font-size: 14px;
  }
}
.line {
  width: 100%;
  height: 1px;
  background-color: #eee;
}
.breadcrumb {
  line-height: 34px;
  margin-bottom: 20px;
  margin-top: 10px;
  padding: 15px 10px;
  .tagcrumb {
    display: inline-block;
    .green {
      color: #48c5a3;
      margin: 0 4px;
    }
  }
}

.card-ul-horizontal li .red {
    background-image: url('../assets/imgs/red.1bcab03.png');
}

.card-ul-horizontal li .yellow {
    background-image: url('../assets/imgs/yellow.852b7f0.png');
}

.card-ul-horizontal li .green {
    background-image: url('../assets/imgs/green.a6ab2bc.png');
}
.card-ul-horizontal {
  width: 100%;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  flex-wrap: wrap;
  padding-bottom: 20px;
  li {
    background-color: #fff;
    box-shadow: 0 0 20px 0 rgb(0 0 0 / 4%);
    border-radius: 6px;
    height: 150px;
    width: 586px;
    display: flex;
    margin-bottom: 30px;
    position: relative;
    &:hover {
      box-shadow: 0 0 20px 0 rgb(0 0 0 / 14%);
    }
    img {
      width: 219px;
      height: 150px;
      border-bottom-left-radius: 6px;
      border-top-left-radius: 6px;
    }
    .Badge {
      position: absolute;
      right: 0;
      top: 0;
      width: 100px;
      height: 28px;
      font-size: 14px;
      font-weight: 500;
      color: #fff;
      line-height: 28px;
      text-align: center;
      cursor: context-menu;
    }
  }
  .card-img {
    position: relative;
    width: 219px;
    .card-time {
      position: absolute;
      right: 8px;
      bottom: 8px;
      width: 60px;
      height: 18px;
      border-radius: 2px;
      text-align: center;
      background-color: rgba(0, 0, 0, 0.5);
      font-size: 12px;
      font-weight: 400;
      color: #fff;
      line-height: 17px;
    }
  }
  .card-text {
    padding: 24px 0 0 16px;
    width: 345px;
    p {
      font-size: 14px;
      font-weight: 400;
      color: #666;
      line-height: 26px;
      overflow-x: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      -webkit-box-orient: vertical;
      &:first-child {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        line-height: 25px;
      }
      &:last-child {
        font-size: 12px;
        font-weight: 400;
        color: #999;
        line-height: 17px;
        margin-top: 30px;
      }
    }
  }
}
.flink {
  padding-bottom: 20px;
  li {
    font-size: 16px;
    color: #999;
    margin-right: 5px;
    line-height: 30px;
  }
}
</style>